<template>
  <div class="user">
    <div class="header">
      <div class="info">
        <div class="img">
          <img
            src="https://www.shqchapp.com/static/uploads/images/2021/09/21/163219777461495c8eb6d23.jpg"
            alt=""
            style="width: 100%"
          />
          <!-- <button @click="$router.push('/login')">登录</button>
          <button @click="$store.dispatch('user/lgout')">退出</button>
          <div>
            {{ $store.state.user.userInfo.M_UserName }}
          </div> -->
        </div>
        <div class="xinxi">
          <div class="userinfo" v-if="$store.state.user.userInfo.M_LoginID">
            {{ $store.state.user.userInfo.M_LoginID }}
            <span class="lgbtn" @click="$store.dispatch('user/lgout')"
              >退出登录</span
            >
          </div>
          <div class="btn" @click="$router.push('/login')" v-else>
            登录/注册
          </div>
        </div>
      </div>
    </div>
    <div class="section-one section">
      <div class="one-inner inner">
        <div>
          <span
            class="num"
            v-if="
              $store.state.user.userInfo.M_LoginID && record.collectioncount
            "
            >{{ record.collectioncount }}</span
          >
          <span class="num" v-else>0</span>
          <p class="title">收藏夹</p>
        </div>
        <div>
          <span
            class="num"
            v-if="$store.state.user.userInfo.M_LoginID && record.coupon"
            >{{ record.coupon }}</span
          >
          <span class="num" v-else>0</span>
          <p class="title">关注店铺</p>
        </div>
        <div>
          <span
            class="num"
            v-if="$store.state.user.userInfo.M_LoginID && record.historyconut"
            >{{ record.historyconut }}</span
          >
          <span class="num" v-else>0</span>
          <p class="title">足迹</p>
        </div>
        <div>
          <span
            class="num"
            v-if="$store.state.user.userInfo.M_LoginID && record.followcount"
            >{{ record.followcount }}</span
          >
          <span class="num" v-else>0</span>
          <p class="title">全部订单</p>
        </div>
      </div>
    </div>
    <div class="section-two section">
      <div class="one-inner inner">
        <div>
          <span class="img"></span>
          <p class="title color">待付款</p>
        </div>
        <div>
          <span class="img"></span>
          <p class="title color">待发货</p>
        </div>
        <div>
          <span class="img"></span>
          <p class="title color">待收货</p>
        </div>
        <div>
          <span class="img"></span>
          <p class="title color">待评价</p>
        </div>
        <div>
          <span><i class="iconfont icon-tuihuanhuo"></i></span>
          <p class="title color">退换货</p>
        </div>
      </div>
    </div>

    <div class="section-three section">
      <div class="one-inner inner">
        <div>
          <span> <i class="iconfont icon-ticket_money_fill"></i></span>
          <p class="title color">我的优惠券</p>
        </div>
        <div>
          <span> <i class="iconfont icon-money"></i></span>
          <p class="title color">我的余额</p>
        </div>
        <div>
          <span> <i class="iconfont icon-fapiao"></i></span>
          <p class="title color">我的发票</p>
        </div>
        <div>
          <span> <i class="iconfont icon-moneycollect"></i></span>
          <p class="title color">我的积分</p>
        </div>
        <div>
          <span> <i class="iconfont icon-address"></i></span>
          <p class="title color">地址管理</p>
        </div>
      </div>
    </div>
    <div class="section-four section">
      <div class="one-inner inner">
        <div>
          <span> <i class="iconfont icon-jilu"></i></span>
          <p class="title color">砍价记录</p>
        </div>
        <div>
          <span> <i class="iconfont icon-code"></i></span>
          <p class="title color">邀请好友</p>
        </div>
        <div>
          <span> <i class="iconfont icon-shop"></i></span>
          <p class="title color">店铺</p>
        </div>
        <div>
          <span> <i class="iconfont icon-download"></i></span>
          <p class="title color">APP下载</p>
        </div>
        <div>
          <span> <i class="iconfont icon-set"></i></span>
          <p class="title color">系统管理</p>
        </div>
        <div>
          <span> <i class="iconfont icon-kehufuwukefu"></i></span>
          <p class="title color">联系客服</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHome } from "@/api/home";
export default {
  data() {
    return {
      record: {},
    };
  },
  created() {
    // this.$store.dispatch("user/getUser");
    getHome({
      ids: "1,2,3,4",
      isAfterSale: true,
      token: "e3df3e53dfe71a2c7ba08d047c5b9088",
      method: "order.getorderstatusnum",
    }).then((res) => {
      this.record = res.data.data;
    });
  },
};
</script>
<style scoped>
@import url(@/assets/css/iconfont.css);
</style>
<style scoped>
.user {
  background: url(@/assets/images/member-bg.png) no-repeat;
  background-size: 100%;
  background-position: 0 0;
  background-color: #f5f4f4;
  overflow: auto;
}
.user .header .info {
  display: flex;
  align-items: center;
  margin: 0.6rem 0 0 0.5rem;
}
.header .info .btn {
  color: #fff;
  width: 1.8rem;
  height: 0.5rem;
  line-height: 0.5rem;
  border-radius: 0.25rem;
  background: #ff7159;
  font-size: 0.24rem;
  text-align: center;
  margin-left: 0.5rem;
}
.user .header .img {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
}
.section {
  padding: 0.1rem 0.3rem;
  width: 100%;
}
.section .inner {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 0.2rem;
  padding: 0 0.1rem;
}
.section .inner > div {
  width: 25%;
  text-align: center;
  padding: 0.3rem 0;
}
.section-one .one-inner > div .num {
  font-size: 0.34rem;
  font-weight: 700;
}
.section .inner > div p {
  font-size: 0.24rem;
  margin-top: 0.2rem;
}
.section .inner > div p.color {
  color: #666;
  margin-top: 0.1rem;
}
.section .inner div .img {
  display: block;
  width: 0.54rem;
  margin: 0 auto;
  height: 0.54rem;
  background-image: url(@/assets/images/me-ic-obligation.png);
  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section-two .inner div {
  width: 20%;
}
.xinxi {
  flex: 1;
}
.xinxi .userinfo {
  font-size: 0.44rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 0 0.2rem;
}
.xinxi .lgbtn {
  color: #f5f4f4;
  background-color: #ff7159;
  font-size: 0.28rem;
  display: block;
  width: 1.4rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  border-radius: 0.3rem;
}
</style>